import { useEffect, useState } from "react";
import { Component, getComponentById, useComponentsStore } from "@/stores/edit-pages-store";
import { Select, TreeSelect, TreeSelectProps,TreeDataNode } from "antd";
import { useComponentConfigStore } from "@/stores/low-editor-comps-conf";
import { getMainOutlineData, CompTreeDataNode } from "@/pages/lowCodeEditorPlus/components/MaterialWrapper/components/Outline/outlineData";
import { omit } from "lodash-es";
// type TreeOnChangeType = Exclude<TreeSelectProps["onChange"], undefined>
// type ExtraParamType = Parameters<TreeOnChangeType>[2];
export interface ComponentMethodConfig {
  type: "componentMethod";
  label: string
  config: {
    componentId: string;
    method: string;
  };
}

interface ComponentMethodProps {
  value?: ComponentMethodConfig["config"];
  onChange?: (config: ComponentMethodConfig) => void;
}

export const componentMethodMsg={
  type: "componentMethod",
  label: "组件特性动作",
  desc: "触发所选组件的特性动作"
}

export function ComponentMethod(props: ComponentMethodProps) {
  const { value, onChange } = props;
  const { schema, curComponentId } = useComponentsStore();
  const { flatComponentConfig } = useComponentConfigStore();
  const componentConfig = flatComponentConfig()
  const [selectedComponent, setSelectedComponent] = useState<Component | null>();
  const [curId, setCurId] = useState<string>();
  const [curMethod, setCurMethod] = useState<string>();

  useEffect(() => {
    if (value) {
      setCurId(value.componentId);
      setCurMethod(value.method);

      setSelectedComponent(getComponentById(value.componentId, schema));
    }
  }, [value]);
  function componentChange(value: string) {
    if (!curComponentId) return;
    setCurId(value);
    setSelectedComponent(getComponentById(value, schema));
  }

  function componentMethodChange(value: string) {
    if (!curComponentId || !selectedComponent) return;
    setCurMethod(value);

    onChange?.({
      ...omit(componentMethodMsg, 'desc') as Omit<ComponentMethodConfig,"config">,
      config: {
        componentId: selectedComponent?.id,
        method: value,
      },
    });
  }
  const {treeData} = getMainOutlineData(true, true);
  return (
    <div className="mt-[40px] p-4">
      <div className="flex items-center gap-[10px]">
        <div>组件：</div>
        <div>
          <TreeSelect
            style={{ width: 200, height: 50 }}
            fieldNames={{
              label: "title",
              value: "key",
            }}
            treeData={treeData}
            value={curId}
            onChange={componentChange}
          />
        </div>
      </div>
      {componentConfig[selectedComponent?.name || ""] && (
        <div className="flex items-center gap-[10px] mt-[20px]">
          <div>方法：</div>
          <div>
            <Select
              style={{ width: 200, height: 50 }}
              options={componentConfig[selectedComponent?.name || ""].methods?.map(method => ({
                label: method.label,
                value: method.name,
              }))}
              value={curMethod}
              onChange={value => {componentMethodChange(value)}}
            />
          </div>
        </div>
      )}
    </div>
  );
}
